<div class=" login">
    <!-- BEGIN LOGO -->
    <div class="logo">
        <img src="{{settings.layoutPath}}/images/logo.png" alt="" width="100" height="56"/>
    </div>
    <!-- END LOGO -->
    <!-- BEGIN LOGIN -->
    <div class="content" style="width: 750px">
        <div ng-class="vm.flash.classNames" ng-bind="vm.flash.message" ng-if="vm.flash"></div>
        <form name="vm.form" class="form-horizontal form-bordered">
            <div class="form-group" ng-class="{
         'has-success': vm.form.mobile.$dirty && vm.form.mobile.$valid,
            'has-error': vm.form.mobile.$touched && vm.form.mobile.$invalid
            }">
                <label class="col-sm-3 control-label" for="mobile"><span class="red-star">*</span>手机号码</label>

                <div class="col-sm-8">
                        <input type="text" style="float:left;width:220px"placeholder="手机号码" class="form-control" name="mobile"
                               ng-model="vm.user.mobile" ng-minlength="11" ng-maxlength="11" required>
                           <span class="errorMsg"
                                 ng-if="vm.form.mobile.$dirty && vm.form.mobile.$invalid">
                        <span ng-if="vm.form.mobile.$error.required">请输入手机号.</span>
                         <span ng-if="!vm.form.mobile.$error.required && vm.form.mobile.$invalid">手机格式不正确.</span>
                    </span>
                </div>
            </div>
            <div class="form-group" ng-class="{
         'has-success': vm.form.securityCode.$dirty && vm.form.securityCode.$valid,
            'has-error': vm.form.securityCode.$touched && vm.form.securityCode.$invalid
            }">
                <label class="col-sm-3 control-label" for="securityCode1"><span class="red-star">*</span>验证码</label>

                <div class="col-sm-9">
                <span>
                    <input type="text" placeholder="验证码" class="form-control" name="securityCode"
                           ng-model="vm.user.securityCode" style="float:left;width:220px" required>
                    <div class="btn green" ng-disabled="vm.getCheckSec" style="float:left;margin-left: 15px" ng-click="vm.getSecurityCode()">
                        获取验证码{{vm.getCheckSec>0?'('+vm.getCheckSec+'秒)':''}}
                    </div>
                    <span class="errorMsg"
                            ng-if="vm.mobileInvalid">
                        <span >{{vm.securityCodeMsg}}</span>
                    </span>
                </span>
                </div>
            </div>
            <div class="form-group" ng-class="{
         'has-success': vm.form.email.$dirty && vm.form.email.$valid,
            'has-error': vm.form.email.$touched && vm.form.email.$invalid
            }">
                <label class="col-sm-3 control-label" for="email"><span class="red-star">*</span>邮箱
                </label>

                <div class="col-sm-8 ">
                    <!--<div class="input-group">-->
                    <input style="float:left;width:220px" placeholder="邮箱（建议使用工作邮箱）" type="email" class="form-control"
                           name="email" ng-model="vm.user.email" required>
                    <!--</div>-->
                    <span class="errorMsg"
                          ng-if="vm.form.email.$dirty && vm.form.email.$invalid">
                        <span ng-if="vm.form.email.$error.required">请输入邮箱.</span>
                         <span ng-if="vm.form.email.$error.email">邮箱格式错误.</span>
                    </span>
                </div>
            </div>
            <div class="form-group" ng-class="{
         'has-success': vm.form.password.$dirty && vm.form.password.$valid,
            'has-error': vm.form.password.$touched && vm.form.password.$invalid
            }">
                <label class="col-sm-3 control-label" for="password"><span class="red-star">*</span>密码</label>

                <div class="col-sm-4">
                    <div class="input-group" >
                        <input style="width:220px" placeholder="请输入6~20位密码" type="password" minlength="6" maxlength="20"
                               class="form-control" name="password" ng-model="vm.user.password" required>
                    </div>
                </div>
            </div>
            <div class="form-group" ng-class="{
         'has-success': vm.form.passwordReply.$dirty && vm.form.passwordReply.$valid,
            'has-error': vm.form.passwordReply.$touched && vm.form.passwordReply.$invalid
            }">
                <label class="col-sm-3 control-label" for="passwordReply"><span class="red-star">*</span>重复密码</label>

                <div class="col-sm-8" >
                    <input style="float:left;width:220px" placeholder="请重复输入密码" type="password" minlength="6" maxlength="20" class="form-control"
                               name="passwordReply" ng-model="vm.user.passwordReply" required>
                    <span class="errorMsg" ng-if="vm.pwdInvalid">两次密码输入不一致</span>
                </div>
            </div>

            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-9">
                        <button type="submit" class="btn green" ng-click="vm.register(vm.user)"
                                ng-disabled="vm.form.$invalid||vm.registerSending">
                            <i class="fa fa-check"></i> 继续
                        </button>
                        <button type="button" class="btn default" ng-click="vm.cancel()">取消</button>
                    </div>

                </div>
            </div>
        </form>
    </div>
</div>